<template>
  <div class="certificate">
    <vheader pageTitle="实名认证"></vheader>
    <form :action="post_url" id="form" method="get">
      <input type="hidden" name="returnUrl" v-model="return_url">
      <input type="hidden" name="acctKey" v-model="acctKey">
      <input type="hidden" name="realName" v-model="real_name">
      <input type="hidden" name="cardNo" v-model="card_no">
    </form>
    <div class="realname border-1px">
      <span>真实姓名</span>
      <input type="text" placeholder="请输入您的真实姓名" v-model="real_name">        
    </div>
    <div class="idcard border-1px">
      <span>身份证号</span>
      <input type="text" placeholder="请输入您的身份证号" v-model="card_no">
    </div>
    <div @click="goAuth" class="certificate-btn">
      <vbutton text="立即认证" :loading="loading"></vbutton>
    </div>

  </div>
</template>

<script>
  import vheader from 'components/common/comHead'
  import { Toast, Spinner } from 'mint-ui'
  import vmask from 'components/common/mask'
  import { isIdCardNo } from '@/tool/check.js'
  import vbutton from 'components/common/button'
  import config from '../../config.js'

  export default {
    data () {
      return {
        loading: false,
        post_url: '',
        real_name: '',
        card_no: '',
        sign: '',
        nick_name: '',
        return_url: '',
        remark: '',
        number_id: '',
        advice_url: '',
        account_name: '',
        mode: '',
        acctKey: ''
      }
    },
    methods: {
      _isIdCardAuth () {
        const realName = this.real_name
        const cardNo = this.card_no
        const acctKey = this.acctKey

        this.$http.get(`/api/member/account/pc/validateIdCardNo?realName=${realName}&cardNo=${cardNo}&acctKey=${acctKey}`)
          .then((res) => {
            if (res.data.success) {
              document.getElementById('form').submit()
              this.loading = false
            } else {
              Toast(res.data.msg)
              this.loading = false
            }
          })
      },
      goAuth () {
        if (this.realName === '') {
          Toast('请输入正确的姓名')
          return
        }
        if (isIdCardNo(this.card_no) === false) {
          Toast('请输入合法的身份证号')
          return
        }
        this.loading = true

        this._isIdCardAuth()
      }
    },
    created () {
      console.log(config.OPENAUTHSUCCESSRETURNURL)
      this.acctKey = this.$cookie.get('acctKey')
      this.post_url = config.OPENAUTHPOSTURL // config.OPENAUTHPOSTURL
      this.return_url = config.OPENAUTHSUCCESSRETURNURL
    },
    components: {
      vbutton,
      vheader,
      Toast,
      Spinner,
      vmask
    }
  }
</script>

<style lang='scss'>
  @import '../../common/scss/tool.scss';
  @import '../../common/scss/_variable.scss';

  .certificate {
    font-size: 30px;
    .realname,
    .idcard {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      height: 110px;
      width: 100%;
      padding: 0 30px;
      margin: 0 auto;
      @include border-1px(#{$base-e5e5e5});
      input {
        outline: none;
        flex: 1 0 auto;
        text-align: right;
      }
    }
    &-btn {
      text-align: center;
      margin: 70px 0 50px 0;
    }
  }
</style>
